<template>
	<view style="min-height: 100vh;position: relative;background-color: #f2f2f2;">
		<u-navbar title='线下点检'  left-icon-color="white" :autoBack="true" :titleStyle="{'color':'white'}" bgColor="#13989a"
			:placeholder="true"></u-navbar>
		<view class="container">
			<view class="floor">
				<view class="title" style="margin-top: 20rpx;">
					问题图片
				</view>
				<upload name="overImage" @uploadFile="uploadImge">

				</upload>
			</view>
			<view class="floor">
				<view class="title flex" style="justify-content: space-between;">
					<text> 巡查模板</text>
					<view class="flex" style="align-items: center;" @click="tampleteShow=true">
						<text style="font-weight: normal;font-size: 28rpx;color: #6b6b6b;"
							v-if="templateNameObj.templateName"> {{templateNameObj.templateName}} </text>
						<text style="font-weight: normal;font-size: 28rpx;color: #dcdcdc;" v-else> 请选择巡查模板</text>
						<u-icon name="arrow-right" color="#6b6b6b" size="14"></u-icon>
					</view>
				</view>
				<view style="margin: 20rpx 0;">
					<u-gap height="1" bgColor="#f4f4f4"></u-gap>
				</view>
				<view class="title flex" style="justify-content: space-between;">
					<text> 点检问题</text>
					<view class="flex" style="align-items: center;" @click="taskListShow=true">
						<view style="width: 250rpx;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;text-align: end;">
							<text style="font-weight: normal;font-size: 28rpx;color: #6b6b6b;" v-if="list[0]">
								{{taskName}}</text>
							<text style="font-weight: normal;font-size: 28rpx;color: #dcdcdc;" v-else> 至少选取一个问题</text>
						</view>
						<u-icon name="arrow-right" color="#6b6b6b" size="14"></u-icon>
					</view>
				</view>
			</view>
			<view class="floor">
				<view class="title">
					备注
				</view>
				<u--textarea v-model="spotCheckRemark" :count='true' placeholder="请输入备注"></u--textarea>
			</view>
		</view>
		<u-popup :show="tampleteShow" @close="tampleteShow=false" round="10" mode="bottom">
			<view class="overdueForm" style="padding-top: 20rpx;height: 50vh;overflow-y: auto;">
				<view style="text-align: center;font-size: 30rpx;margin-bottom: 50rpx;">
					选择模板
				</view>
				<view class="workerSearch" style="">
					<image style="width: 34rpx;height: 34rpx;"
						src="https://renovationcdn.jiachuangnet.com/index/workerIndex/search.png"></image>
					<u-input @blur='blurSearch' placeholder="请输入模板名称" style="height: 78rpx;"
						v-model="templateName"></u-input>
				</view>
				<view class="floor" @click="changeTamplateFn(item)" v-for="(item,index) in patrolTemplateList"
					:key="index" style="border-bottom: 1rpx solid #dcdcdc;">
					<view class="title">
						{{item.templateName}}
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="taskListShow" @close="taskListShow=false" round="10" mode="bottom">
			<view class="overdueForm" style="padding-top: 20rpx;height: 80vh;overflow-y: auto;position: relative;">
				<view style="text-align: center;font-size: 30rpx;margin-bottom: 80rpx;">
					选择模板
				</view>
				<view v-if="patrolTemplate">
					<u-tabs v-if="largeVoList" @click='handlerTab' :activeStyle="{'fontSize':'28rpx','fontWeight':'700','color':'#1e272e'}"
						:inactiveStyle="{'fontSize':'28rpx','fontWeight':'500','color':'#868686'}" lineColor='#13989A'
						:list="largeVoList" :scrollable="true" :current="currentTab" ></u-tabs>
					<u-collapse>
						<u-collapse-item :title="v.termName" name="Docs guide"
							v-for="(v,i) in patrolTemplate.largeVoList[currentTab].termVoList" :key="v.termId">

							<view class="task flex"
								style="justify-content: space-between;height: 80rpx;align-items: center;"
								v-for="(item,index) in v.list" :key="item.problemId">
								<view class="flex" style="height: 80rpx;align-items: center;">
									<view @click="isChooseFn(i,index)">
										<u-icon name="checkmark-circle-fill" color="#13989A" size="20"
											v-if="item.isChoose"></u-icon>
										<u-icon name="checkmark-circle-fill" color="#d1d1d1" size="20" v-else></u-icon>
									</view>
									<view class="tasktital">
										{{item.problemName}}
									</view>
									<view style="margin: 10rpx 20rpx;" class="flex" v-if="item.isChoose">
										<view class="isOk" style="width: 100rpx;margin-right: 20rpx;" @click.stop="qualifiedHandler(1,i,index)">
											<u-button text="合格" size="mini" :type="item.isQualified==1?'primary':''"
												></u-button>
										</view>
										<view style="width: 100rpx;" @click.stop="qualifiedHandler(2,i,index)">
											<u-button text="不合格" :type="item.isQualified==2?'warning':''" size="mini"
												></u-button>
										</view>
									</view>
								</view>
								<view v-if="item.isChoose&&item.isQualified==2" style="color: red;">
									-{{item.problemScore}}.0分
								</view>
								<view v-if="item.isChoose&&item.isQualified==1" style="color: #13989A;">
									+{{item.problemScore}}.0分
								</view>
								<view v-if="!item.isChoose">
									{{item.problemScore}}.0分
								</view>
							</view>


						</u-collapse-item>
					</u-collapse>
				</view>
				<view
					style="background-color: #fff;padding: 10rpx 20rpx;position: absolute;bottom: 0;left: 0;right: 0;">
					<u-button shape="circle" color='#13989A' @click="taskFn">保存</u-button>
				</view>
			</view>
		</u-popup>
		<view class="footer">
			<view style="background-color: #fff;padding: 10rpx 20rpx;">
				<u-button shape="circle" color='#13989A' @click="addPatrolRecord">提交</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import upload from "@/components/upload/upload.vue"
	export default {
		data() {
			return {
				currentTab: 0,
				remark: '',
				tampleteShow: false,
				patrolTemplateList: [],
				templateName: '',
				templateNameObj: {},
				taskListShow: false,
				patrolTemplate: null,
				largeVoList: [],
				list: [],
				spotCheckRemark: '',
				spotCheckImg: [],
				assignTaskId: 0,
				fullScore: 0,
				taskName: ''
			}
		},
		components: {
			upload
		},
		onShow() {
			this.getPatrolTemplateVo()
		},
		onLoad(option) {
			if (option.templateId) {
				this.assignTaskId = option.assignTaskId
			}
			this.assignTaskId = option.assignTaskId
		},
		computed: {
			patrolScore() {
				let total = 0
				if (this.patrolTemplate) {
					this.patrolTemplate.largeVoList.forEach((v, i) => {
						v.termVoList.forEach((item, index) => {
							item.list.forEach((problemItem, problemIndex) => {
								if (problemItem.isQualified == 1) {
									total += problemItem.problemScore
								}
							})
						})
					})
					return total
				} else {
					return 0
				}

			}
		},
		methods: {
			uploadImge(msg) {
				this.spotCheckImg = msg.files
			},
			taskFn() {
				this.taskListShow = false
				this.patrolTemplate.largeVoList.forEach((v, i) => {
					v.termVoList.forEach((item, index) => {
						item.list.forEach((problemItem, problemIndex) => {
							if (problemItem.isChoose) {
								this.taskName = problemItem.problemName + this.taskName
								this.list.push({
									isQualified: problemItem.isQualified,
									largeId: v.largeId,
									termId: item.termId,
									problemId: problemItem.problemId,
									recordScore: problemItem.problemScore,
								})
							}
						})
					})
				})

			},
			addPatrolRecord() {
				if(this.list.length<=0){
					return uni.$u.toast('至少选择一条问题 :)');
				}
				uni.$u.http.post('/patrol/addPatrolRecord', {
					patrolTemplateId: Number(this.templateNameObj.templateId),
					assignTaskId: Number(this.assignTaskId),
					fullScore: this.fullScore,
					patrolScore: this.patrolScore,
					patrolType: 4, //1 在线巡查 2 线下巡查 3 在线点检 4 线下点检
					list: this.list,
					spotCheckImg: this.spotCheckImg.join(','),
					spotCheckRemark: this.spotCheckRemark
				}).then(res => {
					if (res) {
						uni.showToast({
							title: '提交成功',
							duration: 1000,
							mask: true,
							complete: () => {
								setTimeout(() => {
									uni.redirectTo({
										url: `/packageC/pages/workbench/index`
									})
								}, 1000)
							}
						});
					}
				})
			},
			qualifiedHandler(val, termIndex, problemIndex) {
				this.patrolTemplate.largeVoList[this.currentTab].termVoList[termIndex].list[problemIndex].isQualified =
					val

			},
			isChooseFn(i, index) {
				this.patrolTemplate.largeVoList[this.currentTab].termVoList[i].list[index].isQualified=2
				let flag = this.patrolTemplate.largeVoList[this.currentTab].termVoList[i].list[index]
					.isChoose
				this.patrolTemplate.largeVoList[this.currentTab].termVoList[i].list[index]
					.isChoose = !flag
			},
			handlerTab(e) {
				this.currentTab = e.value
			},
			getLargeVo() {
				uni.$u.http.get('/patrol/getPatrolTemplateConfig', {
					params: {
						templateId: this.templateNameObj.templateId
					}
				}).then(res => {
					if (res) {
						this.fullScore = res.totalScore
						res.largeVoList.forEach((v, i) => {
							v.termVoList.forEach((item, index) => {
								item.list.forEach((problemItem, problemIndex) => {
									problemItem.isChoose = false
									problemItem.isQualified = 0
								})
							})
						})
						this.largeVoList = res.largeVoList.map((item, index) => {
							return {
								name: item.largeName,
								value: index,
							}
						})
						this.patrolTemplate = res
					}
				})
			},
			changeTamplateFn(item) {
				this.tampleteShow = false
				this.templateNameObj = item
				this.getLargeVo()
			},
			blurSearch() {
				this.getPatrolTemplateVo()
			},
			getPatrolTemplateVo() {
				uni.$u.http.post('/patrol/getPatrolTemplateVo', {
					pageNumber: 1,
					pageSize: 1000,
					state: 1,
					brandPartyId: uni.getStorageSync('brandPartyId'),
					templateName: this.templateName.length > 0 ? this.templateName : null
				}).then(res => {
					this.patrolTemplateList = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.isOk{
		.u-button--primary{
			background-color:#13989a;
			border-color:#13989a;
		}
	}
	
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 150rpx;
		background-color: #ffffff;
	}

	.container {
		width: 92vw;
		padding: 30rpx;
		z-index: 10;
		position: absolute;
		top: 180rpx;
		overflow: hidden;
		border-radius: 20rpx;
	}

	.workerSearch {
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		padding-left: 22rpx;
		width: 100%rpx;
		height: 60rpx;
		background-color: #e6e6e6;
		opacity: 0.9;
		margin: 10rpx 0;
	}

	.floor {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.adress {
			font-size: 26rpx;
		}

		.title {
			font-weight: 600;
			font-size: 30rpx;
		}
	}
</style>